<template>
  <div class="global">
    <el-container class="global-contain">
      <el-header>
        <div class="head">
          <div class="headtitle">
            <img src="../../assets/xh.png" style="width: 100px;height: 60px;vertical-align: middle;" alt="" srcset="">
            <div class="title" style="color: #fff;display: inline-block;">重庆理工大学</div>
          </div>
          <div>
            <img v-if="user.icon == null" src="../../assets/logo.png"
              style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;" alt=""
              srcset="">
            <img v-else :src="user.icon"
              style="margin-right: 10px; width: 50px;height: 50px;border-radius: 50%;vertical-align: middle;" alt=""
              srcset="">

            <el-dropdown>
              <span class="el-dropdown-link" style="color: #fff;">
                {{ user.username }}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="personal()">个人信息</el-dropdown-item>

                <el-dropdown-item @click.native="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </div>
      </el-header>

      <el-container class="contain">
        <el-aside width="200px" class="aside">
          <el-menu :default-active="$route.path" router class="el-menu-demo menu">
            <el-menu-item index="/product/home"> <i class="el-icon-s-home menuicon"></i>首页</el-menu-item>

            <el-submenu index="0">
              <template slot="title"> <i class="el-icon-user menuicon"></i>成果管理</template>
              <el-menu-item index="/product/list"> <i class="el-icon-s-home menuicon"></i>论文</el-menu-item>
              <el-menu-item index="/product/list1"> <i class="el-icon-s-home menuicon"></i>课程教学</el-menu-item>
              <el-menu-item index="/product/list2"> <i class="el-icon-s-home menuicon"></i>专利</el-menu-item>
              <el-menu-item index="/product/list3"> <i class="el-icon-s-home menuicon"></i>科研项目</el-menu-item>
              <el-menu-item index="/product/list4"> <i class="el-icon-s-home menuicon"></i>教学奖励</el-menu-item>

            </el-submenu>
            <el-menu-item index="/product/gg"><i class="el-icon-s-home menuicon" ></i>公告管理</el-menu-item>
            <el-menu-item index="/product/jszy"> <i class="el-icon-s-home menuicon"></i>教师主页</el-menu-item>

          </el-menu>
        </el-aside>

        <el-main>
          <router-view></router-view>
        </el-main>

      </el-container>
    </el-container>
  </div>
</template>
<script>
import service from '@/utils/request';
export default {
  data() {
    return {
      user: {}
    }
  },
  mounted() {
    this.getinfo()
  },
  methods: {
    async getinfo() {
      const res = await service.get("/auth/info");
      console.log(res)
      this.user = res.data.userInfo
      window.localStorage.setItem("userinfo", JSON.stringify(this.user))
    },
    personal() {


      this.$router.push({
        path: "/product/personal"
      })

    },
    updatepassword() {

      this.$router.push({
        path: "/password"
      })


    },
    logout() {
      window.localStorage.clear()
      this.$router.push({
        path: "/"
      })
    }
  }
}
</script>
<style>
.el-table thead tr th {
  background: #f8f8f8 !important;
}

.el-main {
  background: #f8f8ff !important;
}

.menu .el-submenu__title {
  color: #fff !important;
}

.menu .el-menu-item {
  color: #fff !important;
}

.menu .is-active {
  background: #2bb7e5 !important;
}

.menu .el-submenu__title:hover {
  background: #2bb7e5 !important;
}

.menu .el-menu-item:hover {
  background: #2bb7e5 !important;
}

.menu {
  width: 100%;
  height: 100%;
  background: #2c334c !important;
}

.menu .el-menu {
  width: 100%;
  height: 100%;
  background: #2c334c !important;
}

.el-header {
  padding: 0px 20px !important;
  box-sizing: border-box;
  background: #2c334c;
}

.el-aside {
  overflow: hidden !important;

}
</style>
<style scoped>
.menuicon {
  color: #fff;
}

.contain {
  width: 100%;
  height: calc(100% - 60px);
}

.headtitle {
  font-weight: bold;
  color: #fff;
}

.head {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;

}

.global {
  width: 100%;
  height: 100%
}

.global-contain {
  width: 100%;
  height: 100%
}

.aside {
  height: 100%
}
</style>
